<template>
  <div style="width:100%;height:100%">
    <ListTable :options="tableOptions" />
  </div>
</template>

<script setup>
  import { ListTable } from '@visactor/vue-vtable';
  import { createGroup, createText, createImage, Tag, CheckBox, Radio } from '@visactor/vtable/es/vrender';
  const tableOptions = {
    header: [
      {
        field: '0',
        caption: '名称'
      },
      {
        field: '1',
        caption: '年龄'
      },
      {
        field: '2',
        caption: '性别'
      },
      {
        field: '3',
        caption: '爱好'
      },
      {
        field: '',
        title: 'Operation options',
        width: 400,
        customLayout: args => {
          const { table, row, col, rect } = args;
          const { height, width } = rect ?? table.getCellRect(col, row);

          const container = createGroup({
            height,
            width,
            display: 'flex',
            flexDirection: 'column',
            // alignItems: 'center',
            justifyContent: 'center'
          });

          const checkboxGroup = createGroup({
            display: 'flex',
            flexDirection: 'row',
            flexWrap: 'no-wrap',
            boundsPadding: [5, 0, 5, 10],
            justifyContent: 'center'
          });
          container.appendChild(checkboxGroup);

          const checkboxText = createText({
            text: 'operate: ',
            fontSize: 12,
            boundsPadding: [0, 10, 0, 0]
          });
          checkboxGroup.appendChild(checkboxText);

          const checkbox1 = new CheckBox({
            text: {
              text: 'like',
              fontSize: 12
            },
            spaceBetweenTextAndIcon: 2,
            boundsPadding: [0, 10, 0, 0]
          });
          checkbox1.render();
          checkboxGroup.appendChild(checkbox1);
          checkbox1.addEventListener('checkbox_state_change', e => {
            console.log('checkbox_state_change', e);
          });

          const checkbox2 = new CheckBox({
            text: {
              text: 'collect',
              fontSize: 12
            },
            spaceBetweenTextAndIcon: 2
            // boundsPadding: [10, 0, 0, 10]
          });
          checkbox2.render();
          checkboxGroup.appendChild(checkbox2);
          checkbox2.addEventListener('checkbox_state_change', e => {
            console.log('checkbox_state_change', e);
          });

          const radioGroup = createGroup({
            display: 'flex',
            flexDirection: 'row',
            flexWrap: 'no-wrap',
            boundsPadding: [5, 0, 5, 10]
          });
          container.appendChild(radioGroup);

          const radioText = createText({
            text: 'type: ',
            fontSize: 12,
            boundsPadding: [0, 10, 0, 0]
          });
          radioGroup.appendChild(radioText);

          const radio1 = new Radio({
            text: {
              text: 'normal',
              fontSize: 12
            },
            checked: true,
            spaceBetweenTextAndIcon: 2,
            boundsPadding: [0, 10, 0, 0]
          });
          radio1.render();
          radioGroup.appendChild(radio1);
          radio1.addEventListener('radio_checked', () => {
            if (radio2.attribute.checked) {
              radio2.setAttribute('checked', false);
              table.scenegraph.updateNextFrame();
            }
          });

          const radio2 = new Radio({
            text: {
              text: 'special',
              fontSize: 12
            },
            spaceBetweenTextAndIcon: 2
          });
          radio2.render();
          radioGroup.appendChild(radio2);
          radio2.addEventListener('radio_checked', () => {
            if (radio1.attribute.checked) {
              radio1.setAttribute('checked', false);
              table.scenegraph.updateNextFrame();
            }
          });

          return {
            rootContainer: container,
            renderDefault: false
          };
        }
      },
    ],
    records: new Array(1000).fill(['张三', 18, '男', '🏀'])
  };
</script>